<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <head th:include="common::head"></head>
    <title>登录</title>
    <style>

        body{
            background-size: cover;
        }
        .lyear-wrapper {
            position: relative;
        }
        .lyear-login {
            /*display: flex !important;*/
            display: flex;
            /*min-height: 100vh;*/
            align-items: center !important;
            justify-content: center !important;
        }
        .login-center {
            background: #fff;
            /*min-width: 38.25rem;*/
            min-width: 50rem;
            padding: 2.14286em 3.57143em;
            border-radius: 5px;
            margin: 2.85714em 0;
        }
        .login-header {
            margin-bottom: 1.5rem !important;
        }
        .login-center .has-feedback.feedback-left .form-control {
            padding-left: 38px;
            padding-right: 12px;
        }
        .login-center .has-feedback.feedback-left .form-control-feedback {
            left: 0;
            right: auto;
            width: 38px;
            height: 38px;
            line-height: 38px;
            z-index: 4;
            color: #dcdcdc;
        }
        .login-center .has-feedback.feedback-left.row .form-control-feedback {
            left: 15px;
        }

        header{
            text-align: center;
        }
        header img{
           /* width: 50%;*/
            height: 130px;
        }

        .modal h2{
            text-align: center;
        }
        .modal p{
            text-indent: 30px;
            margin: 0 20px 0 20px;
        }
    </style>
</head>

<body>
<div class="row lyear-wrapper">
    <header class="col-md-12">
        <img src="/static/images/zjnulogo.png">
    </header>
    <div class="col-md-12">
    <div class="lyear-login login">
        <div class="login-center">
            <div class="panel panel-primary">
                <div class="panel-heading" style="text-align: center">
                    <h3>登 录</h3>
                </div>
                <div class="panel-body">
                    <form method="post" id="login-form">
                        <div class="form-group row has-feedback feedback-left">
                            <label class="col-form-label col-md-3">用户名：</label>
                            <div class="col-md-9">
                                <input type="text" placeholder="请输入您的用户名" class="form-control" name="username" id="username"/>
                                <span class="mdi mdi-account form-control-feedback" aria-hidden="true"></span>
                            </div>

                        </div>
                        <div class="form-group row has-feedback feedback-left">
                            <label class="col-form-label col-md-3">密码：</label>
                            <div class="col-md-9">
                                <input type="password" placeholder="请输入密码" id="password" class="form-control" name="password" />
                                <span class="mdi mdi-lock form-control-feedback" aria-hidden="true"></span>
                            </div>
                        </div>
                        <div class="form-group row has-feedback feedback-left">
                            <label class="col-form-label col-md-3">验证码：</label>
                            <div class="col-md-9">
                                <div class="row">
                                    <div class="col-md-8">
                                        <input type="text" placeholder="请输入验证码" id="imageCode" class="form-control" name="imageCode" />
                                        <span class="mdi mdi-lock form-control-feedback" aria-hidden="true"></span>
                                    </div>
                                    <div class="col-md-4">
                                       <span id="imageCodeSpan">
                                        <img src="/code/image" onclick="updateImageCode()" id="validate-img"/>
                                       </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row has-feedback feedback-left">
                            <input type="checkbox" name="remember-me" style="float: right;margin-right:30px"/>
                            <span style="float: right;margin-right:10px"><strong>记住我</strong></span>
                        </div>
                        <div class="form-group">
                            <button class="btn btn-primary" id="login-button" onclick="doLogin()" style="float: right">立即登录</button>
                        </div>
                    </form>
                </div>

            </div>
            <hr>
            <footer class="col-sm-12 text-center">
                <p class="m-b-0">Copyright © 2019 <a href="http://zs.zjnu.edu.cn">xxxxx</a>. All right reserved</p>
                <p>联系电话：0579 - 82282245</p>
            </footer>
        </div>
    </div>
    </div>
</div>
<script type="text/javascript" th:src="@{/static/plugins/jquery/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/static/plugins/bootstrap-prod-v4/js/bootstrap.min.js}"></script>
<!--表单验证-->
<script type="text/javascript" th:src="@{/static/plugins/bootstrapvalidator/dist/js/bootstrapValidator.js}"></script>
<script type="text/javascript">

    $(function () {
        $('#login-form').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        }
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        }
                    }
                }
            }
        });

        $(document).keydown(function(e) {

            if((e.keyCode || e.which)==13) {
                doLogin();
            }
        });
    });


    function doLogin() {

        var bootstrapValidator = $("#login-form").data('bootstrapValidator');
        //不通过时显示提示信息
        bootstrapValidator.validate();
        if(!bootstrapValidator.isValid()){
            return false;
        }else {
            var isRememberMe = $("[name='remember-me']").is(':checked')==true?true:false;
            var jsonData={"username":$("#username").val(),"password":$("#password").val(),"remember-me":isRememberMe,"imageCode":$("#imageCode").val()};
            $.ajax({
                url:'/login',
                type:'POST',
                data:jsonData,
                dataType:'json',
                success:function (res) {
                    if (res.code==200) {
                        window.location.href="/index";
                    }else if(res.code==0){
                        alert("验证码错误");
                    }else{
                        alert(res.message);
                    }
                },
                error:function () {
                    alert("登录出错");
                }
            });
        }
    }

    /**
     * 点击刷新验证码
     */
    function updateImageCode() {

        $("#validate-img").attr("src","/code/image");

    }
</script>
</body>
</html>